﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>数据列表页面</title>
    <!-- layui.css -->
    <link th:href="@{/background/plugin/layui/css/layui.css}" href="../../static/background/plugin/layui/css/layui.css" rel="stylesheet" />
    <style>

        tr td:not(:nth-child(0)),
        tr th:not(:nth-child(0)) {
            text-align: center;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -icab-text-overflow: ellipsis;
            -khtml-text-overflow: ellipsis;
            -moz-text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
        }

        #dataConsole {
            text-align: center;
        }
        /*分页页容量样式*/
        /*可选*/
        .layui-laypage {
            display: block;
        }

            /*可选*/
            .layui-laypage > * {
                float: left;
            }
            /*可选*/
            .layui-laypage .laypage-extend-pagesize {
                float: right;
            }
            /*可选*/
            .layui-laypage:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

            /*必须*/
            .layui-laypage .laypage-extend-pagesize {
                height: 30px;
                line-height: 30px;
                margin: 0px;
                border: none;
                font-weight: 400;
            }
        /*分页页容量样式END*/
    </style>
</head>
<body>
    <fieldset id="dataList" class="layui-elem-field layui-field-title sys-list-field" style="display:none;">
        <legend style="text-align:center;">签名列表</legend>
        <button class="layui-btn" style="margin:10px auto auto auto;display: block" onclick="layui.datalist.addData()">
            <i class="layui-icon">&#xe608;</i> 添加签名
        </button>
        <div class="layui-field-box layui-form">
            <div id="dataContent" class="">
                <!--内容区域 ajax获取-->
            </div>
            <div id="pageNav"></div>
        </div>
    </fieldset>
    <!-- layui.js -->
    <script th:src="@{/background/plugin/layui/layui.js}" src="../../static/background/plugin/layui/layui.js"></script>
    <!-- layui规范化用法 -->
    <script type="text/javascript" th:inline="javascript">
        var signatureNum=[[${session.signatureNum}]];

        layui.define(['element','laypage', 'layer', 'form' ], function (exports) {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form();
            var laypage = layui.laypage;
            var element = layui.element();
            var laypageId = 'pageNav';

            initilData(1, 10);
            //页数据初始化
            //currentIndex：当前页面
            //pageSize：页容量（每页显示的条数）
            function initilData(currentIndex, pageSize) {
                var index = layer.load(1);
                //模拟数据加载
                setTimeout(function () {
                    layer.close(index);
                    $.ajax({
                        url:"/admin/signatureManage/list/"+currentIndex,
                        type:"GET",
                        data:{
                            pageSize:pageSize
                        },
                        success:function(signatureList){
                            var html = '';
                            html += '<table style="table-layout: fixed" class="layui-table" lay-even>';
                            html += '<colgroup><col width="40"><col width="100"><col width="100"><col width="60"><col width="60"><col width="40"><col width="40"><col width="40"></colgroup>';
                            html += '<thead><tr><th>编号</th><th>标题</th><th>内容</th><th>按钮内容</th><th>发布时间</th><th>显示</th><th colspan="2">操作</th></tr></thead>';
                            html += '<tbody>';
                            for(var i in signatureList){
                                var item=signatureList[i];
                                html+='<tr>';
                                html+='<td>'+item.id+'</td>';
                                html+='<td>'+item.title+'</td>';
                                html+='<td>'+item.content+'</td>';
                                html+='<td>'+item.buttonText+'</td>';
                                html+='<td>'+item.publishTime+'</td>';
                                if(item.is_show){
                                    html+='<td><i class="layui-icon" style="font-size: 30px; color: #009688;vertical-align: middle;">&#xe609;</i> </td>';
                                }else{
                                    html+='<td><i class="layui-icon" style="font-size: 30px; color:#d2d2d2; vertical-align: middle;">&#xe60f;</i> </td>';
                                }
                                html+='<td><button class="layui-btn layui-btn-small layui-btn-normal" onclick=\'layui.datalist.editData('+JSON.stringify(item)+')\'><i class="layui-icon">&#xe642;</i></button></td>';
                                html+='<td><button class="layui-btn layui-btn-small layui-btn-danger" onclick="layui.datalist.deleteData('+item.id+')"><i class="layui-icon">&#xe640;</i></button></td>';
                                html+='</tr>';
                            }
                            html+='</tbody></table>';
                            $('#dataContent').html(html);
                            element.init();

                        }
                    });

                    $('#dataConsole,#dataList').attr('style', 'display:block'); //显示FiledBox

                    laypage({
                        cont: laypageId,
                        pages: signatureNum/pageSize==0?signatureNum/pageSize:signatureNum/pageSize+1,
                        groups: 5,
                        skip: true,
                        curr: currentIndex,
                        jump: function (obj, first) {
                            var currentIndex = obj.curr;
                            if (!first) {
                                initilData(currentIndex, pageSize);
                            }
                        }
                    });
                }, 500);
            }

            //输出接口，主要是两个函数，一个删除一个编辑
            var datalist = {
                deleteData: function (id) {
                    layer.confirm('您确定要删除吗？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        $.ajax({
                            url:'/admin/signature/'+id,
                            data:{},
                            type:'DELETE',
                            success:function (result) {
                                var result=eval("("+result+")");
                                if(result.success){
                                    layer.alert('删除成功!', {
                                        closeBtn: 0,
                                        icon: 1
                                    }, function(){
                                        window.location.href="/admin/signatureManage"
                                    });
                                }else{
                                    layer.alert('删除失败!', {icon: 5});
                                }
                            }
                        });
                    }, function () {

                    });
                },
                editData: function (item) {
                    var html='';
                    html+='<form class="layui-form layui-form-pane" action="/admin/signature" method="post">';
                    html+='<input type="hidden" name="_method" value="put" />';
                    html+='<input type="hidden" name="id" value="'+item.id+'" />';
                    html+='<label class="layui-form-label" style="border: none" name="content" >签名标题:</label>';
                    html+='<input  style="width:87%;margin: auto;color: #000!important;" name="title"  class="layui-input" value="'+item.title+'" >';
                    html+='<label class="layui-form-label" style="border: none" name="content" >签名内容:</label>';
                    html+='<textarea  style="width:87%;margin: auto;color: #000!important;" name="content" class="layui-textarea " >'+item.content+'</textarea>';
                    html+='<label class="layui-form-label" style="border: none" name="content" >按钮内容:</label>';
                    html+='<input  style="width:87%;margin: auto;color: #000!important;" name="buttonText"  class="layui-input" value="'+item.buttonText+'" >';

                    html+='<label class="layui-form-label" style="border: none" name="content" >是否显示:</label>';
                    if(item.is_show){
                        html+='<input type="radio" name="is_show" value="1" title="是" checked>';
                        html+='<input type="radio" name="is_show" value="0" title="否" >';
                    }else{
                        html+='<input type="radio" name="is_show" value="1" title="是">';
                        html+='<input type="radio" name="is_show" value="0" title="否"   checked>';
                    }
                    html+='<div class="layui-form-item">';
                    html+='<div class="layui-input-inline" style="margin:10px auto 0 auto;display: block;float: none;">';
                    html+='<button class="layui-btn" id="submit"  lay-submit="" lay-filter="demo1">立即修改</button>';
                    html+='<button type="reset" class="layui-btn layui-btn-primary">重置</button>';
                    html+='</div>';
                    html+='</div>';
                    html+='</form>';

                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: '620px', //宽高
                        title:'修改签名',
                        content: html
                    });
                    form.render('radio');  //radio，编辑和添加的时候
                },
                addData:function () {
                    var html='';
                    html+='<form class="layui-form layui-form-pane" action="/admin/signature" method="post">';
                    html+='<label class="layui-form-label" style="border: none" name="content" >签名标题:</label>';
                    html+='<input  style="width:87%;margin: auto;color: #000!important;" name="title" lay-verify="required"  class="layui-input" >';
                    html+='<label class="layui-form-label" style="border: none" name="content"  >签名内容:</label>';
                    html+='<textarea  style="width:87%;margin: auto;color: #000!important;" lay-verify="required" name="content" class="layui-textarea " ></textarea>';
                    html+='<label class="layui-form-label" style="border: none" name="content" >按钮内容:</label>';
                    html+='<input  style="width:87%;margin: auto;color: #000!important;" lay-verify="required" name="buttonText"  class="layui-input"  >';
                    html+='<label class="layui-form-label" style="border: none" name="content" >是否显示:</label>';
                    html+='<input type="radio" name="is_show" value="1" title="是" checked>';
                    html+='<input type="radio" name="is_show" value="0" title="否" >';
                    html+='<div class="layui-form-item">';
                    html+='<div class="layui-input-inline" style="margin:10px auto 0 auto;display: block;float: none;">';
                    html+='<button class="layui-btn" id="submit"  lay-submit="" lay-filter="demo1">添加</button>';
                    html+='<button type="reset" class="layui-btn layui-btn-primary">重置</button>';
                    html+='</div>';
                    html+='</div>';
                    html+='</form>';

                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: '620px', //宽高
                        title:'添加签名',
                        content: html
                    });
                    form.render('radio');  //radio，编辑和添加的时候
                }
            };
            exports('datalist', datalist);
        });

    </script>
</body>
</html>